<template>
  <div class="item-card-root">
    <div class="item-card-header">
      <div class="item-card-title-prefix">
        <slot name="titlePrefix">
          <i class="el-icon-coin"></i>
        </slot>
      </div>
      <div class="item-card-title">{{title}}</div>
      <div class="item-card-title-suffix">
        <slot name="titleSuffix"></slot>
      </div>
      <div class="item-card-close" @click="contentVisible = !contentVisible">
        <i :class="closeIcon"></i>
      </div>

    </div>
    <!--    <el-collapse-transition>-->
    <div class="item-card-content" v-show="contentVisible">
      <slot></slot>
    </div>
    <!--    </el-collapse-transition>-->
  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, watch, computed } from '@vue/composition-api'

  export default {
    name: 'itemCard',
    props: {
      defaultContentVisible: {
        type: Boolean,
        default: false
      },
      title: {
        type: [String, Number],
        default: '这是标题'
      }
    },
    setup(props, content) {
      let { defaultContentVisible } = props
      let data = reactive({
        contentVisible: defaultContentVisible
      })
      let closeIcon = computed({
        get() {
          return data.contentVisible ? 'el-icon-arrow-down' : 'el-icon-arrow-left'
        }
      })

      return { ...toRefs(data), closeIcon }
    }
  }
</script>

<style scoped lang="scss">
  .item-card-root {
    border: 3px solid green;
    padding: 5px;


    .item-card-header {
      display: flex;
      align-items: center;
      border-bottom: 1px solid green;

      .item-card-title-prefix, .item-card-title-suffix {
        margin: 0px 5px;
      }

      .item-card-title-prefix, .item-card-title-suffix, .item-card-title {
        font-size: 24px;
      }

      .item-card-title {
        border-bottom: 1px solid green;
      }

      .item-card-close {
        cursor: pointer;
        color: green;
        padding: 3px 5px 2px 5px;
        border: 1px solid green;
        margin-right: 10px;
        margin-left: auto
      }


    }

    .item-card-content {
      padding: 5px;
    }

  }
</style>
